<template>
    <div>
        <el-dialog title="选择修改数据" :close-on-click-modal="false" width="60%" :visible.sync="dataVisible">
            <div class="goodsindex">
                <!-- 检索结果 -->
                <div style="display: flex; width: 100%;height:100%; justify-content: space-between">
                    <!-- 树结构 -->
                    <div style="width: 240px;height:400px;">
                        <el-tree :data="dataTree" :props="defaultProps" @node-click="handleNodeClick"
                            :highlight-current="true" node-key="classId" :current-node-key="classId" ref="tree"
                            :default-expanded-keys="defaultlist"
                            style="border: 1px solid #ebeef5; height: 100%;overflow-y: auto; width: 240px"
                            class="treeOverflow"></el-tree>
                    </div>
                    <div style="width: calc(100% - 260px)">
                        <el-table :data="userList" border size="mini" :row-key="getRowID" style="width: 100%"
                            ref="dataTable" height="400px" v-loading="isloading" @row-dblclick="rowdblclickHandle">
                            <el-table-column type="index" header-align="center" align="center" label="序" width="50">
                            </el-table-column>
                            <el-table-column prop="className" header-align="center" align="center" label="物料名称">
                            </el-table-column>
                            <el-table-column prop="pinNum" header-align="center" align="center" label="物料编码">
                            </el-table-column>
                            <el-table-column width="80" prop="address" header-align="center" align="center" fixed="right"
                                label="操作">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="handleLook(scope.row)">查看</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <!-- 分页 -->
                <el-row :gutter="20" class="goodsindex-list">
                    <el-col :span="24" class="goodsindex-page-box">
                        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="pageIndex" :page-sizes="[1, 2, 10, 20, 50, 100]" :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper" :total="totalPage">
                        </el-pagination>
                    </el-col>
                </el-row>
            </div>
        </el-dialog>
        <addElDialog ref="addElDialog" @dataForm="success"></addElDialog>
        <treeTableLook ref="treeTableLook"></treeTableLook>
    </div>
</template>
  
<script>

//   import { treeDmodelataTranslate } from "../../utils/treeDataTranslate.js";
import treeTableLook from './treeTableLook.vue';
import addElDialog from './add.vue';
export default {
    components: {
        treeTableLook,
        addElDialog
    },
    data() {
        return {
            dataVisible: false,
            classId: '',
            pageIndex: 1,
            pageSize: 10,
            totalPage: 0,
            isloading: false,
            userList: [],
            defaultlist: [],
            dataTree: [],
            defaultProps: {
                children: "list",
                label: "className",
            },
            type: ''
        };
    },
    computed: {

    },
    created() {

    },
    methods: {
        init(type, data, id) {
            this.dataVisible = true
            this.type = type
            this.getTreeList();
        },
        //获取用户列表
        async getUserlist() {
            this.isloading = true;
            this.userList = [];
            await this.Sevice({
                url: "/ad/object/list",
                method: "get",
                params: {
                    // name: this.queryInfo.name,
                    classId: this.classId,
                },
            })
                .then((res) => {
                    console.log(res)
                    if (res && res.code == 200) {
                        // if (res.list.length) {
                        //     for (let i in res.list) {
                        //         res.list[i].qrcodeUrl =
                        //             res.list[i].qrcodeUrl + "?time=" + Date.now();
                        //     }
                        // }
                        this.userList = res.list;
                        // console.log(this.userList)
                        this.totalPage = res.list.length;
                        this.userList = this.userList.slice(
                            (this.pageIndex - 1) * this.pageSize,
                            this.pageIndex * this.pageSize
                        );
                    } else {
                        this.userList = [];
                        this.totalPage = 0;
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
            this.isloading = false;
        },
        //查看
        handleLook(row) {
            this.$nextTick(() => {
                this.$refs.treeTableLook.init(row);
            });
        },
        getRowID(row) {
            return row.objectId;
        },
        // 分页
        handleSizeChange(val) {
            this.pageSize = val;
            this.getUserlist();
        },
        handleCurrentChange(val) {
            this.pageIndex = val;
            this.getUserlist();
        },
        //项目列表
        handleNodeClick(data) {
            if (data.classParentId) {
                this.classId = data.classId;
                this.getUserlist();
            }
        },
        //项目列表
        async getTreeList() {
            this.defaultlist = [];
            await this.Sevice({
                url: "/ad/class/nav",
                method: "get",
            })
                .then((res) => {
                    if (res && res.code == 200) {
                        this.dataTree = res.list;
                        for (let i in this.dataTree) {
                            if (this.dataTree[i].list.length) {
                                this.defaultlist.push(this.dataTree[i].classId);
                                this.classId = this.dataTree[i].list[0].classId;
                                return false;
                            }
                        }
                    } else {
                        this.dataTree = [];
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
            this.$refs.tree.setCurrentKey(this.classId)
            await this.getUserlist();
        },
        rowdblclickHandle(row, column, event) {
            this.$nextTick(() => {
                if (this.type == 2) {
                    this.$refs.addElDialog.init('2', '', { ...row, type: this.type });
                } else {
                    this.$emit('dataForm', { index: '', data: { ...row, type: this.type } })
                    this.dataVisible = false
                }

            });
        },
        success(data) {
            this.$emit('dataForm', data)
            this.dataVisible = false
        }
    },
};
</script>
  
<style scoped>
.imglist {
    display: block;
    margin: 10px;
    width: 180px;
    height: 180px;
}

.goodsindex {
    width: 100%;
    height: 60%;
    padding: 15px;
    box-sizing: border-box;
}

/* 搜索 */
.goodsindex-queryInfo {
    margin-bottom: 10px;
}

.goodsindex-queryInfo-li {
    width: 100%;
    height: auto;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 列表 */
.goodsindex-list {
    width: 100%;
    height: auto;
    margin-top: 20px;
}

/* 分页 */
.goodsindex-page-box {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-end;
}

/* 预览 */
/* /deep/.el-dialog__body{
      padding: 0;
      padding-bottom: 20px;
  }
  /deep/.el-dialog__header{
      height: 0px;
      padding: 0;
  }
  /deep/.el-dialog__headerbtn{
      position: absolute;
      top: 20px;
  }
  /deep/.el-dialog__headerbtn i{
      color: #fff;
  } */
.treeOverflow::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 4px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
}

.treeOverflow::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px #C1C1C1;
    background: #C1C1C1;
}

.treeOverflow::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px #F1F1F1;
    border-radius: 0;
    background: #F1F1F1;
}

/deep/ .el-tree-node__label {
    white-space: normal;
    word-break: break-all;
}

/deep/ .el-tree-node__content {
    height: auto;
}</style>